@import './reset';
@import './setting';
@import './flex';

@function getvw($w) {
    @return calc($w / 375) * 100+vw;
}

body {
    background: #e9ecf0ff;
}

.container {
    width: getvw(375);
    @extend %columnCenter;

    header {
        width: 100%;
        margin-bottom: getvw(5);

        // 导航栏
        nav {
            width: 100%;
            height: getvw(45);
            @extend %betweenCenter;
            background-color: #ffffff;
            padding: 0 getvw(15) 0 getvw(10);
            box-sizing: border-box;
            font-size: getvw(16);
            color: #555555ff;
            font-size: getvw(16);
            font-weight: 400;

            i {
                font-size: getvw(17);
                color: #555555ff;
            }
        }
    }

    main {
        width: 100%;
        @extend %columnCenter;
        font-size: 14px;
        font-weight: 400;

        ul {
            width: getvw(365);
            margin-bottom: getvw(50);

            li {
                a {
                    width: 100%;
                    @extend %betweenCenter;
                    padding: getvw(18) getvw(20) getvw(20);
                    box-sizing: border-box;
                    border-radius: getvw(5);
                    margin-bottom: getvw(5);
                    background-color: #ffffff;
                    color: #555555ff;
                }
            }
        }

        .out {
            width: getvw(150);
            height: getvw(30);
            line-height: getvw(30);
            background-color: $themColor;
            border-radius: getvw(20);
            border: none;

            a {
                width: 100%;
                height: 100%;
                display: block;
                color: #ffffff;
            }
        }
    }
}